<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>监护仪</title>
    <!--引入bootstrap核心css-->
    <link rel="stylesheet"  th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}" href="../static/boot/css/bootstrap.min.css" />
    <!--引入jquery核心js文件-->
    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" src="../static/boot/js/jquery-3.5.1.min.js"></script>
    <!--引入bootstrap核心js文件-->
    <script th:src="@{/webjars/bootstrap/3.3.5/js/bootstrap.min.js}" src="../static/boot/js/bootstrap.min.js"></script>

    <script src="https://code.highcharts.com/highcharts.js"></script>


    <script src="../static/js/testGetOne.js"></script>


</head>
<body>
<!--导航条-->
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!--屏幕自适应-->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">监护仪 <small class="badge">V1.0</small> </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"> <span style="color: #e8e2e1">欢迎：</span> </a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span style="color: #e8e2e1">个人中心</span> <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">修改密码</a></li>
                        <li><a href="#">我的资料</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<div class="container-fluid">
    <div class="row">
        <!--左侧菜单-->
        <div class="col-sm-2">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-info">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <span class="glyphicon glyphicon-apple"></span> 系统管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item"><a href="">数据备份</a></li>
                                <li class="list-group-item"><a href="">系统状态</a></li>
                                <li class="list-group-item"><a href="">系统监控</a></li>
                            </ul>

                        </div>
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">
                                <span class="glyphicon glyphicon-user"></span> 数据管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item"><a href="">实时数据</a></li>
                                <li class="list-group-item"><a href="">历史数据</a></li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--页面中心内容-->
        <div class="col-sm-10">
            <!--页头-->
            <div class="page-header">
                <h2 style="margin-top: -37px; margin-bottom: 5px">数据管理</h2>
            </div>
            <!--标签页组件-->
            <div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">实时数据</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">历史数据</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <!--处理用户列表的面板-->
                        <div class="panel panel-default">
                            <div class="panel-body text-center">
                            </div>
                            <div class="row">
                                <div class="col-sm-10 col-sm-offset-1">
                                    <!--<div id="container" style="width: 600px;height:400px;"></div>-->
                                    <div id="container" style="width: 927px;height: 400px" ></div>
                                    <button id="btnConnect" class="btn btn-block" style="background-color: #90d7ec;color: #ffffff">连接</button>
                                    <!--<button id="btnSend" class="btn btn-block">发送</button>-->
                                    <button id="btnDisConnect" class="btn btn-danger btn-block">断开</button>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-10 col-sm-offset-1">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>